<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.min.js"></script>
    <script src="../util/jquery-3.4.0.js"></script>
    <style>
        .Student-box{
            width: 100%;
            height: 100px;
        }
        .Student-menu{
            position: absolute;
            width: 100px;
            height: 30px;
            margin: 40px  auto;
        }
        .Student-box2{
            background: antiquewhite;
            position: absolute;
            left: 120px;
            margin: 40px  auto;


        }
        .Student-box3{
           margin: 40px 40px auto;
        }
    </style>
</head>
<body>
<div>
    <table class="table table-hover container">
        <div class="Student-box">
            <div class="Student-menu">
                <select class="form-control">
                    <option>班级</option>
                    <option>一班</option>
                    <option>二班</option>
                    <option>三班</option>
                    <option>四班</option>
                </select>
            </div>
            <div class="Student-box2">
                <button type="button" class="btn btn-success">＋新学生</button>
            </div>
            <div class="pull-right Student-box3">
                <input  class="form-control" placeholder="搜索栏">
                <button class="btn btn-default" type="submit">Button</button>
            </div>
        </div>
        <div class="container">
            <tr style="background: #9ffab7">
                <th>姓名</th>
                <th>班级</th>
                <th>联系人</th>
                <th>联系号码</th>
                <th>状态</th>
                <th></th>
                <th></th>
                <th></th>
                <th>功能</th>
                <th></th>
            </tr>
            <tr>
                <th>张三</th>
                <th>二班</th>
                <th>某某某</th>
                <th>13222222222</th>
                <th>在读</th>
                <th></th>
                <th></th>
                <th></th>
                <th><a class="btn btn-default " href="#" role="button" data-details="details">详情</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">设置</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">删除</a>
                </th>
                <th></th>
            </tr>
            <tr>
                <th>张三</th>
                <th>二班</th>
                <th>某某某</th>
                <th>13222222222</th>
                <th>在读</th>
                <th></th>
                <th></th>
                <th></th>
                <th><a class="btn btn-default " href="#" role="button" data-details="details">详情</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">设置</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">删除</a>
                </th>
                <th></th>
            <tr>
                <th>张三</th>
                <th>二班</th>
                <th>某某某</th>
                <th>13222222222</th>
            <th>在读</th>
            <th></th>
            <th></th>
            <th></th>
            <th><a class="btn btn-default " href="#" role="button" data-details="details">详情</a>
                <a class="btn btn-default " href="#" role="button" data-details="details">设置</a>
                <a class="btn btn-default " href="#" role="button" data-details="details">删除</a>
            </th>
            <th></th>
            </tr>
            <tr>
                <th>张三</th>
                <th>二班</th>
                <th>某某某</th>
                <th>13222222222</th>
                <th>在读</th>
                <th></th>
                <th></th>
                <th></th>
                <th><a class="btn btn-default " href="#" role="button" data-details="details">详情</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">设置</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">删除</a>
                </th>
                <th></th>
            </tr>
            <tr>
                <th>张三</th>
                <th>二班</th>
                <th>某某某</th>
                <th>13222222222</th>
                <th>在读</th>
                <th></th>
                <th></th>
                <th></th>
                <th><a class="btn btn-default " href="#" role="button" data-details="details">详情</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">设置</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">删除</a>
                </th>
                <th></th>
            </tr>
            <tr>
                <th>张三</th>
                <th>二班</th>
                <th>某某某</th>
                <th>13222222222</th>
                <th>在读</th>
                <th></th>
                <th></th>
                <th></th>
                <th><a class="btn btn-default " href="#" role="button" data-details="details">详情</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">设置</a>
                    <a class="btn btn-default " href="#" role="button" data-details="details">删除</a>
                </th>
                <th></th>
            </tr>
        </div>
    </table>
</div>


<nav aria-label="...">
    <ul class="pager">
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="#" role="button" data-details="details">首页</a>
            </div>
        </li>
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="#" role="button" data-details="details">1</a>
                <a class="btn btn-default " href="#" role="button" data-details="details">2</a>
                <a class="btn btn-default " href="#" role="button" data-details="details">3</a>
                <a class="btn btn-default " href="#" role="button" data-details="details">4</a>
                <a class="btn btn-default " href="#" role="button" data-details="details">5</a>
            </div>
        </li>
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="#" role="button" data-details="details">下一页</a>
            </div>
        </li>
        <li>
            <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " href="#" role="button" data-details="details">尾页</a>
            </div>
        </li>
    </ul>
</nav>
</body>
<script>
    let oPlus=document.querySelector('.plus')





    // let oA=document.querySelectorAll('[data-details="details"]');
    //
    // for(var i=0;oA.length;i++){
    //    oA[i].onclick=function () {
    //        alert(1)
    //    }
    // }

</script>
</html>



